<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>主界面布局</title>
    <link rel="stylesheet" href="../css/mainbodyCss.css">
    <style type="text/css">
        .nav {
            overflow: hidden;
        }

        .nav_ul {
            margin-left: 20px;
            overflow: hidden;
            -webkit-margin-before: 0em;
            -webkit-margin-after: 0em;
        }

        .nav>ul li {
            float: left;
            list-style: none;
            width: 100px;
            border-right: 2px solid red;
            display: inline;

            overflow: hidden;

        }

        .nav>ul li:hover {
            cursor: pointer;
        }

        .nav>ul li a {
            text-decoration: none;
            margin: 0 auto;
        }

        .nav_ul li div {
            float: left;
            width: 15px;
            height: 15px;

            margin: 3px;

        }

        .nav_ul_img1 {

            background: url(../img/icon.png) no-repeat;
            background-position: -95px 0;
            background-size: 180px;
        }

        .nav_ul_img2 {
            background: url(../img/icon.png) no-repeat;
            background-position: -165px -48px;
            background-size: 180px;
        }

        .nav_ul_img3 {
            background: url(../img/icon.png) no-repeat;
            background-position: -24px 0;
            background-size: 180px;
        }

        .nav_ul_img4 {
            background: url(../img/icon.png) no-repeat;
            background-position: -24px -117px;
            background-size: 180px;
        }

        .left_ul_level1>li {
            border: 1px solid #000;
            background-color: rgb(164, 236, 130);
            overflow: hidden;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            text-align: center;
        }

        .left_ul_level2 {
            font-size: 12px;

        }

        .leftMenuImgs {
            width: 15px;
            height: 19px;
            float: right;
            background-color:  rgb(164, 236, 130);
            background: url(../img/small_icons.jpg) no-repeat -80px -269px/493px 493px;
        }

        .leftMenuImgs:hover {
            cursor: pointer;
        }
        .change{
            transform: rotate(-90deg);
        }

    </style>
    <script>
        function init() {
            let nodes = document.querySelectorAll(".leftMenuImgs");
            Array.from(nodes).forEach((item) => {
                item.addEventListener("click", (event) => {

                    let node = event.target.parentNode.nextElementSibling;
                    if (node.hidden == true) {
                        node.hidden = false;
                        event.target.classList.add("change");
                    } else {
                        node.hidden = true;
                        event.target.classList.remove("change");
                    }
                }, false);

            });

        }
    
        window.addEventListener("load", init, false);
    </script>
</head>

<body>
    <header class="logo">
        logo
    </header>
    <nav class="nav">
        <ul class="nav_ul">
            <li>
                <div class="nav_ul_img1"></div>
                <a href="#">主页</a>
            </li>
            <li>
                <div class="nav_ul_img2"></div>
                <a href="#">写博客</a>
            </li>
            <li>
                <div class="nav_ul_img3"></div>
                <a href="#">文章类型</a>
            </li>
            <li>
                <div class="nav_ul_img4"></div>
                <a href="#">设置</a></li>
        </ul>

    </nav>
    <section class="mainbody">
        <div class="left">
            <h3>文章类型
                </h1>
                <ul class="left_ul_level1">
                    <li>Java Core
                        <div class="leftMenuImgs"></div>
                    </li>
                    <ul class="left_ul_level2" hidden>
                        <li>面向对象</li>
                        <li>多线程</li>
                    </ul>
                    <li>Java Web
                        <div class="leftMenuImgs"></div>
                    </li>
                    <ul class="left_ul_level2" hidden>
                        <li>Serverlet3+</li>
                        <li>JSTL/EL</li>
                    </ul>
                    <li>前端技术
                        <div class="leftMenuImgs"></div>
                    </li>
                    <ul class="left_ul_level2" hidden>
                        <li>HTML5</li>
                        <li>CSS3</li>
                        <li>ECMAScript 6</li>
                    </ul>
                    <li>心灵鸡汤
                        <div class="leftMenuImgs"></div>
                    </li>
                    <ul class="left_ul_level2" hidden>
                        <li>心情故事
                        </li>

                    </ul>
                </ul>
        </div>
        <div class="article">主页面</div>
        <div class="right">
            <div class="login">login</div>
            <div class="userinfo">info</div>

        </div>
    </section>
    <footer class="footer">author info</footer>

</body>

</html>